<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { defaultPagingParams } from '../index'
import { PAGING } from '@/constant'

const emits = defineEmits<{
  search: []
  reset: []
}>()
// ------------------use------------------
// #region
const { $message } = useCurrentInstance()
const query = defineModel<typeof defaultPagingParams>({ required: true })

const formRef = ref<FormInstance>()

const dateTime = reactive({
  start: '',
  end: '',
})
const rules = generateCurrencyFormRules(dateTime)

const dateType = computed(() => {
  const key = query.value.key
  if (key === '0m') {
    return 'date'
  }
  else if (key === '1H') {
    return 'date'
  }
  else if (key === '1d') {
    return 'month'
  }
  else if (key === '1M') {
    return 'year'
  }
  else {
    return 'year'
  }
})
const dateFormat = computed(() => {
  const key = query.value.key
  if (key === '0m') {
    return 'YYYY-MM-DD'
  }
  else if (key === '1H') {
    return 'YYYY-MM-DD'
  }
  else if (key === '1d') {
    return 'YYYY-MM'
  }
  else if (key === '1M') {
    return 'YYYY'
  }
  else {
    return 'YYYY'
  }
})
// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
watchEffect(() => {
  const key = query.value.key!
  let date: string | undefined = ''
  if (key === '0m') {
    date = undefined
  }
  else if (['1H', '1d', '1M'].includes(key)) {
    date = dateTime.start
  }
  else {
    date = `${dateTime.start}_${dateTime.end}`
  }
  query.value.dataTime = date
})
// #endregion
// ------------------方法---------------------
// #region
/** 重置 */
async function reset() {
  query.value = {
    ...defaultPagingParams,
    pointId: query.value.pointId,
  }
  dateTime.start = ''
  dateTime.end = ''
  await nextTick()
  emits('reset')
}
async function search() {
  Object.assign(query.value, PAGING.PARAMS)
  await nextTick()
  emits('search')
}
function handleDisabledDate(date: Date) {
  const current = new Date()
  const t = date.getTime()
  return t > current.getTime()
  // return month !== targetMonth;
}
async function validate() {
  const key = query.value.key!
  if (key === '0m')
    return true

  const start = new Date(dateTime.start)
  const end = new Date(dateTime.end)
  if (start.getTime() > end.getTime()) {
    $message.error('结束时间不能小于开始时间！')
    return false
  }
  return await formRef.value?.validate()
}
function handleChange() {
  formRef.value?.resetFields()
  const key = query.value.key
  if (key === '1H') {
    dateTime.start = formatTime(Date.now(), 'YYYY-MM-DD')
  }
  else if (key === '1d') {
    dateTime.start = formatTime(Date.now(), 'YYYY-MM')
  }
  else if (key === '1M') {
    dateTime.start = formatTime(Date.now(), 'YYYY')
  }
  else {
    dateTime.start = ''
  }
}
// #endregion
defineExpose({ validate })
</script>

<template>
  <el-form
    ref="formRef"
    inline
    :label-width="query.key === '1y' ? '80px' : '50px'"
    label-position="left"
    class="flex-incompressible width-fill"
    :rules="rules"
    :model="dateTime"
  >
    <el-form-item>
      <ContainSubRadio v-model="query.containSub" />
    </el-form-item>
    <el-form-item
      label-width="80px"
      prop="key"
      label="时间类型"
    >
      <DictionaryPicker
        v-model="query.key"
        :clearable="false"
        code="SHI_JIAN_KE_LI"
        class="free"
        style="width: 80px"
        @change="handleChange"
      />
    </el-form-item>
    <el-form-item
      v-show="query.key !== '0m'"
      prop="start"
      :label="query.key === '1y' ? '开始时间' : '时间'"
    >
      <el-date-picker
        v-model="dateTime.start"
        :type="dateType"
        :value-format="dateFormat"
        :disabled-date="handleDisabledDate"
        class="free"
        style="width: 140px"
      />
    </el-form-item>
    <el-form-item
      v-if="query.key === '1y'"
      label="结束时间"
      prop="end"
    >
      <el-date-picker
        v-model="dateTime.end"
        :type="dateType"
        :value-format="dateFormat"
        :disabled-date="handleDisabledDate"
        class="free"
        style="width: 140px"
      />
    </el-form-item>
    <el-form-item label-width="120px" label="指标编码/名称">
      <el-input
        v-model.trim="query.name"
        maxlength="20"
        placeholder="请输入关键词查找"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="search" />
      <el-button v-if="false" plain :icon="Delete" @click="reset">
        清空
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
